<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
  <!-- <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
  <title>zego-express-example-quick-start</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <h1>zego-express-example-quick-start</h1>
  <div>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </div>

  <div>
    <button id="initButton">init</button>
    <button id="uninitButton">uninit</button>
  </div>

  <div>
    <button id="loginButton">login</button>
    <button id="logoutButton">logout</button>
    <input id="roomIDInput" type="text" placeholder="roomID">
    <input id="userIDInput" type="text" placeholder="userID">
    <input id="userNameInput" type="text" placeholder="useName">
  </div>

  <div>
    <canvas id="localCanvas" width="400px" , height="300px">
    </canvas>
  </div>
  <div>
    <button id="startPreviewButton">startPreview</button>
    <button id="stopPreviewButton">stopPreview</button>
    <button id="setVideoMirrorModeButton">setVideoMirrorMode</button>
  </div>

  <div>
    <button id="startPublishButton">startPublish</button>
    <button id="stopPublishButton">stopPublish</button>
    <input id="publishStreamIDInput" type="text" placeholder="pulishStreamID">
  </div>

  <div>
    <canvas id="remoteCanvas" width="400px" , height="300px">
    </canvas>
  </div>

  <div>
    <button id="startPlayButton">startPlay</button>
    <button id="stopPlayButton">stopPlay</button>
    <input id="playStreamIDInput" type="text" placeholder="playStreamID">
  </div>


  <!-- You can also require other files to run in this process -->
  <script>
    window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.min.js');
    require('./node_modules/bootstrap/dist/js/bootstrap.min.js');
  </script>
  <script src="./renderer.js"></script>
</body>

</html>